<template>
  <div class="wrap">
    <div class="titleWarp">
      <div
        class="titleItem"
        @click="reqList(-1)"
        :class="{ titleItemActiv: status == -1 }"
      >
        全部
      </div>
      <div class="titleItem" @click="reqList(0)" :class="{ titleItemActiv: status == 0 }">
        待付款
      </div>
      <div class="titleItem" @click="reqList(1)" :class="{ titleItemActiv: status == 1 }">
        待接单
      </div>
      <div class="titleItem" @click="reqList(2)" :class="{ titleItemActiv: status == 2 }">
        待送达
      </div>
      <div class="titleItem" @click="reqList(3)" :class="{ titleItemActiv: status == 3 }">
        待评价
      </div>
      <div class="titleItem" @click="reqList(4)" :class="{ titleItemActiv: status == 4 }">
        已完成
      </div>
      <div class="titleItem" @click="reqList(5)" :class="{ titleItemActiv: status == 5 }">
        已取消
      </div>
    </div>

    <div class="productionList" v-if="resGoodsOrderList.length > 0">
      <div
        class="productionItem"
        @click="jumpOrderInfo(item)"
        v-for="(item, index) in resGoodsOrderList"
        :key="index"
      >
        <div class="proTitle">
          <div class="proLeft">
            {{ item.shopName }}
            <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
          </div>
          <div class="proRight">
            {{
              item.status == 0
                ? "待付款"
                : item.status == 1
                ? "待接单"
                : item.status == 2
                ? "待送达"
                : item.status == 3
                ? "待评价"
                : item.status == 4
                ? "已完成"
                : item.status == 5
                ? "已取消"
                : ""
            }}
          </div>
        </div>
        <div
          class="proIntroWrap"
          @click="jumpOrderInfo(item)"
          v-for="(item_, index_) in item.goodsList"
          :key="index_"
        >
          <div class="proIntroLeft">
            <img :src="$imgUrl + item_.listImgUrl" alt="" class="proPoster" />
          </div>
          <div class="proIntroRight">
            <div class="proIntro">
              {{ item_.goodsName }}
            </div>
            <div class="workTime">
              <div class="timeLeft">{{ item_.specsName }}X{{ item_.payNum }}</div>
              <div class="saleRight">
                <em class="moneyLogo">￥</em>{{ item_.payPrice }}
              </div>
            </div>
          </div>
        </div>
        <div class="totalCount">
          总价¥{{ item.shouldPrice }} 优惠¥{{ item.disPrice }}
          <em class="realPay">实付</em>
          <em class="realMoney">￥{{ item.totalPayPrice }}</em>
        </div>
      </div>
    </div>
    <div class="productionList productionList2" v-else>暂无内容...</div>
  </div>
</template>

<script>
import { Switch } from "vant";
import { apiGetFromUserGoodsOrderList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      status: this.$route.query.status, //订单状态:-1全部0待付款1待接单2已接单或待送达3待评价4已评价或已完成5已取消
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resGoodsOrderList: [], //押金缴纳记录列表
    };
  },
  mounted() {
    console.log('status',this.status)
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getFromUserGoodsOrderList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.getFromUserGoodsOrderList();
      }
    },
    //点击订单类型：
    reqList(i) {
      this.status = i;
      this.reqPageNum = 0;
      this.resGoodsOrderList = [];
      this.getFromUserGoodsOrderList();
    },
    //订单列表:
    getFromUserGoodsOrderList() {
      var page = (this.reqPageNum += 1);
      console.log("page", page);
      apiGetFromUserGoodsOrderList({
        pageNum: page,
        pageSize: this.reqpageSize,
        status: this.status == -1 ? "" : this.status,
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resGoodsOrderList = [...this.resGoodsOrderList, ...dataRes];
        console.log("resGoodsOrderList-订单列表", this.resGoodsOrderList);
      });
    },
    jumpOrderInfo(data) {
      // this.$router.push({
      //   path: "/pages/orderInfoWaittingComment",
      //   query: {
      //     //传递参数
      //   },
      // });
      this.$router.push({
        path: "/pages/orderInfoWaittingPay",
        query: {
          menuId: data.id,
        },
      });
      return;
      switch (data.status) {
        case 0: //0待付款
          this.$router.push({
            path: "/pages/orderInfoWaittingComment",
            query: {
              menuId: data.id,
            },
          });
          break;
        case 1: //1待接单
          this.$router.push({
            path: "/pages/orderInfoWaittingRecive",
            query: {
              menuId: data.id,
            },
          });
          break;
        case 2: //2已接单或待送达
          this.$router.push({
            path: "/pages/orderInfoWaittingRecive",
            query: {
              menuId: data.id,
            },
          });
          break;
        case 3: //3待评价
          this.$router.push({
            path: "/pages/orderInfoWaittingRecive",
            query: {
              menuId: data.id,
            },
          });
          break;
        case 4: //4已评价或已完成
          this.$router.push({
            path: "/pages/orderInfoWaittingComment",
            query: {
              menuId: data.id,
            },
          });
          break;
        case 5: //5已取消
          this.$router.push({
            path: "/pages/orderInfoWaittingRecive",
            query: {
              menuId: data.id,
            },
          });
          break;
      }
    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
.titleWarp {
  width: calc(100% - 30px);
  margin: 20px auto;
  height: 35px;
  line-height: 30px;
  overflow-y: hidden;
  overflow-x: scroll;
  display: -webkit-box;
}
.titleItem {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
  margin-right: 30px;
  /* overflow: hidden; */
  /* float: left; */
}
.titleItemActiv {
  font-size: 21px;
  font-weight: 500;
  color: #181818;
  border-bottom: 4px solid #000;
}
.filterWrap {
  width: calc(100% - 26px);
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  padding-left: 26px;
  margin-top: 10px;
}
.productionList {
}
.productionList2 {
  font-size: 16px;
  color: #000;
  margin-left: 10px;
}
.productionItem {
  width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 130px;
  background: #ffffff;
  border-radius: 20px;
  padding: 15px;
  margin-top: 15px;
}
.proTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.proLeft {
}
.proRight {
}
.rightArrow {
  width: 5px;
  height: 9px;
  padding-bottom: 1px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  height: 73px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
  border-radius: 20px;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.totalCount {
  color: #999999;
  font-size: 13px;
  text-align: right;
  width: 100%;
  margin-top: 20px;
}
.realPay {
  color: #181818;
  padding-left: 10px;
}
.realMoney {
  color: #ff5757;
}
</style>
